<template>
  <div class="record-index" ref="recordBoxRef">
    <p class="record-title">拜访记录</p>
    <div class="btn-fill" @click="toFill">我要填写</div>
    <div class="record-main">
      <div class="record-item" v-for="(item, index) of recordList" :key="index">
        <p class="record-date">{{item.date}}</p>
        <el-timeline>
          <el-timeline-item hide-timestamp v-for="(sItem, inx) in item.info" :key="inx" :timestamp="sItem.time">
            <div class="record-content" @click="toEdit(sItem)">
              <span class="visit-time">{{sItem.visitDate && sItem.visitDate.slice(0, 10)}}</span>
              <span style="margin-right: 6px">{{getDay(sItem.visitDate)}}</span>
              <el-avatar :size="30" />
              <span class="visit-active">{{ sItem.visitor || userStore.name }} 和</span>
              <span class="visit-active">{{ sItem.peersName }}</span>
              <span>拜访了</span>
              <span class="visit-active">{{sItem.visitees}}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {recordListAll} from "@/api/visitRecords";
import {useRoute, useRouter} from "vue-router";
import dayjs from "dayjs";
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const emit = defineEmits(['recordInfo', 'edit']);
const recordList = ref<Record<string, any>[]>([]);
const recordBoxRef = ref<any>();

function toEdit(item: any) {
  router.push({
    path: 'recordDetail',
    query: {
      customId: route.query.id,
      id: item.id
    }
  })
}

function toFill() {
  router.push({
    path: 'recordDetail',
    query: {
      customId: route.query.id
    }
  })
}

function getDay(date: string) {
  const arr = ['日', '一', '二', '三', '四', '五', '六', ];
  const day = dayjs(date).day();
  return '周' + arr[day];
}

function getData() {
  recordList.value = [];
  if (!route.query.id) return;
  recordListAll(route.query.id as string).then((res: any) => {
    for (const i in res) {
      recordList.value.push({
        date: i,
        info: res[i]
      })
    }
    emit('recordInfo', recordList.value)
  })
}

getData();

defineExpose({recordBoxRef, getData})

defineComponent({name: 'RecordIndex'})
</script>

<style scoped lang="scss">
.record-index {
  position: relative;
  width: 100%;
  height: calc(100% - 540px);
  padding: 20px;
  background-color: #fff;

  .record-title {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 20px;
    color: #2E3244;
  }

  .btn-fill {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background: #FF4350;
    color: #fff;
    cursor: pointer;
  }

  .record-main {
    width: 100%;

    .record-item {
      margin-bottom: 10px;

      .record-date {
        display: inline-block;
        margin-bottom: 20px;
        padding: 0 10px;
        height: 30px;
        color: #2E3244;
        font-size: 14px;
        background: #eee;
        line-height: 30px;
      }

      .visit-time {
        margin-right: 6px;
      }

      .visit-active {
        margin: 0 2px;
        color: #FF4350;
      }

      .record-content {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
